@import (reference) 'src/style/mixins';

.rating-list {
  display: flex;
  flex-direction: column;
  flex-basis: auto;
  flex-grow: 1;

  &__head {
    position: relative;
    transition: background-color @animation, box-shadow @animation, color @animation;
    z-index: 1;

    .html_light & {
      background-color: @c-primary-8;
      box-shadow: 0 2px 5px @c-black-8;
      color: @c-black-5;
    }

    .html_dark & {
      background-color: @c-primary-2;
      box-shadow: 0 0 0 transparent;
      color: @c-white-6;
    }
  }

  &__body {
    flex-basis: 0;
    flex-grow: 1;
    overflow: hidden;
    transition: background-color @animation;

    .html_light & {
      background-color: @c-white;
    }

    .html_dark & {
      background-color: @c-black;
    }
  }

  &__table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }

  &__col {
    @width-position: 32px;
    @width-position-change: 24px;
    @width-position-head: @width-position + @width-position-change;
    @width-name: 128px;
    @width-rank: 64px;
    @width-value: 40px;
    @width-value-change: 24px;
    @width-value-head: @width-value + @width-value-change;
    @width-favorite: 48px;
    @width-total: @width-position-head + @width-name + @width-rank + @width-value-head;

    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &_head {
      padding: 8px 0;
    }

    &_position {
      min-width: @width-position;
      padding-right: 2px;
      text-align: right;
      width: percentage(@width-position / @width-total);
    }

    &_position-change {
      min-width: @width-position-change;
      width: percentage(@width-position-change / @width-total);
    }

    &_position-head {
      min-width: @width-position-head;
      text-align: center;
      width: percentage(@width-position-head / @width-total);
    }

    &_name {
      min-width: @width-name;
      width: percentage(@width-name / @width-total);
    }

    &_rank {
      min-width: @width-rank;
      text-align: center;
      text-transform: capitalize;
      width: percentage(@width-rank / @width-total);
    }

    &_value {
      min-width: @width-value;
      padding-right: 2px;
      text-align: right;
      width: percentage(@width-value / @width-total);
    }

    &_value-change {
      min-width: @width-value-change;
      width: percentage(@width-value-change / @width-total);
    }

    &_value-head {
      min-width: @width-value-head;
      text-align: center;
      width: percentage(@width-value-head / @width-total);
    }

    &_favorite {
      min-width: @width-favorite;
      width: @width-favorite;
    }
  }

  &__change {
    &_negative {
      .html_light & {
        color: @c-error-5;
      }

      .html_dark & {
        color: @c-error-2;
      }
    }

    &_none {
      display: none;
    }

    &_positive {
      .html_light & {
        color: @c-success-5;
      }

      .html_dark & {
        color: @c-success-2;
      }
    }
  }
}
